<template>
  <section>
    <van-sticky>
      <PageHeader title="交友申请"/>
    </van-sticky>

    <van-tabs v-model="type" @change="onTabChanged" scrollspy sticky>
      <van-tab title="向我申请的" name="others">
        <template v-if="type == 'others'">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="requestData">

            <div class="flex flex-col bg-color-white mt10 ml10 mr10 round-box"
                 v-for="(item, index) in dataList"
                 :key="index">
              <div class="flex flex-row flex-left flex-centerV pb10 pt10 pl10 pr10 font-big">
                <img :src="item.apply_user.avatar_url" class="user-avatar"
                     @click="$router.push({name: 'MemberProfile', query: {id: item.apply_member.id}})"/>
                <span
                  @click="$router.push({name: 'MemberProfile', query: {id: item.apply_member.id}})">{{ item.apply_user.nick }}</span>
              </div>

              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">{{ item.type_label }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">
                状态：{{ item.status_label }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray" v-if="item.remark">
                说明：{{ item.remark }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark">
                申请时间：{{ item.apply_time|timeFormat('yyyy-MM-dd hh:mm:ss') }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark"
                   v-if="item.audit_time > 0">审核时间：{{ item.audit_time|timeFormat('yyyy-MM-dd hh:mm:ss') }}
              </div>
              <div class="flex flex-row flex-center" v-if="item.audit_time == 0">
                <div class="flex flex-row flex-center flex-1 bg-color-orange color-white pt10 pb10"
                     style="border-bottom-left-radius: 8px;" @click="audit(index, 'reject')">
                  拒绝
                </div>

                <div class="flex flex-row flex-center flex-1 bg-color-green color-white pt10 pb10"
                     style="border-bottom-right-radius: 8px;" @click="audit(index, 'pass')">
                  通过
                </div>
              </div>
            </div>

          </van-list>
        </template>
      </van-tab>

      <van-tab title="我申请的" name="my">
        <template v-if="type=='my'">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="requestData">

            <div class="flex flex-col bg-color-white mt10 ml10 mr10 round-box"
                 v-for="(item, index) in dataList"
                 :key="index">
              <div class="flex flex-row flex-left flex-centerV pb10 pt10 pl10 pr10 font-big">
                <img :src="item.apply_to_user.avatar_url" class="user-avatar"
                     @click="$router.push({name: 'MemberProfile', query: {id: item.apply_to_member.id}})"/>
                <span
                  @click="$router.push({name: 'MemberProfile', query: {id: item.apply_to_member.id}})">{{ item.apply_to_user.nick }}</span>
              </div>

              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">{{ item.type_label }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray">
                状态：{{ item.status_label }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray" v-if="item.remark">
                说明：{{ item.remark }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark">
                申请时间：{{ item.apply_time|timeFormat('yyyy-MM-dd hh:mm:ss') }}
              </div>
              <div class="flex flex-row flex-left pb10 pt10 pl10 pr10 font-common border-top-gray color-gray-dark"
                   v-if="item.audit_time > 0">审核时间：{{ item.audit_time|timeFormat('yyyy-MM-dd hh:mm:ss') }}
              </div>
            </div>

          </van-list>
        </template>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {memberProfileExchangeApplyAuditUri, memberProfileExchangeApplyListsUri} from "../../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      type: 'others',
      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],
    }
  },
  methods: {
    onTabChanged(name, title) {
      this.currentPage = 1;
      this.lastPage = 0;
      this.total = 0;
      this.loading = false;
      this.finished = false;
      this.dataList = [];
      this.requestData();
    },
    audit(index, status) {
      const item = this.dataList[index];
      const that = this;
      const url = memberProfileExchangeApplyAuditUri + '?id=' + item.id + '&status=' + status;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.$set(that.dataList, index, data.apply);
        }
      }, response => {
        // error callback
      })
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = memberProfileExchangeApplyListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage + '&type=' + this.type;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {

  }
}
</script>

<style scoped>
.user-avatar {
  height: 20px;
  width: 20px;
  border-radius: 10px;
}
</style>
